<!-- 弹窗组件 -->
<template>
    <el-dialog title="商品" v-model="visible" width="80%">



      <div class="dialog-container">
        <div class="category-sidebar">
            <el-autocomplete
            clearable
            class=""
            placeholder="查找..."
            style="margin-bottom: 10px;width: 140px;"
            /><el-button :icon="Search" circle plain  style="margin-left: 5px;" />
            <div class="caidan">
            <el-dropdown 
          trigger="click" 
          placement="bottom"
          popper-class="category-dropdown"
        
        >
          <span class="dropdown-trigger">
            {{ '全部' }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item 
                v-for="item in categories" 
                :key="item.value"
                :command="item.value"
                :disabled="!item.enabled"
              >
                <div class="dropdown-item-content">
                  <span>{{ item.label }}</span>
                  <span class="item-count">{{ item.count }}</span>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
            </div>
        </div>
    
        
        <!-- 右侧商品列表 -->
        <div class="product-main">
          <!-- 操作工具栏 -->
          <div class="toolbar">
            <el-checkbox  size="small" />
            <span class="filter-text">仅显示有货</span>
            <div class="pagination">
                <el-pagination size="small" layout="prev, pager, next" :total="50" />
            </div>
          </div>
  
          <!-- 商品表格 -->
          <el-table :data="products" stripe  height="400px">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="code" label="商品编码" width="120" />
            <el-table-column prop="name" label="商品名称" min-width="200" />
            <el-table-column prop="category" label="商品类别" width="120" />
            <el-table-column prop="spec" label="规格型号" width="120" />
            <el-table-column prop="unit" label="计量单位" width="100" />
            <el-table-column label="禁用" width="80">
              <template #default="{ row }">
                {{ row.disabled ? '是' : '否' }}
              </template>
            </el-table-column>
          </el-table>
  
          <!-- 底部操作栏 -->
          <div class="footer-toolbar">
            <el-button type="primary">新增</el-button>
            <el-button type="primary">确定</el-button>
            <el-button>取消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'
  let visible = ref(true)
  let selectedCategory = ref('all')
 


  //分类
  interface Category {
  label: string
  value: string
  count: number
  enabled: boolean
  hasChildren: boolean
}

const categories = ref<Category[]>([
  { label: '流量卡', value: 'card', count: 2, enabled: true, hasChildren: false },
  { label: '休闲食品', value: 'food', count: 5, enabled: true, hasChildren: true },
  { label: '水果拼盘', value: 'fruit', count: 3, enabled: true, hasChildren: false },
  { label: '饮品饮料', value: 'drink', count: 2, enabled: false, hasChildren: true },
  { label: '营销活动', value: 'promo', count: 1, enabled: true, hasChildren: false },
  { label: '测试分类', value: 'test', count: 1, enabled: false, hasChildren: false }
])
  
  //具体数据
  let products = ref([
    {
      id: 1,
      code: 'SP00002',
      name: '【批次保质期】津津卤汁豆腐干苏州特产五香豆干',
      category: '休闲食品',
      spec: '500g/包',
      unit: '包',
      disabled: false,
      checked: true
    },{
        id: 1,
      code: 'SP00002',
      name: '【批次保质期】津津卤汁豆腐干苏州特产五香豆干',
      category: '休闲食品',
      spec: '500g/包',
      unit: '包',
      disabled: false,
      checked: true
    }
  ])
  
  let addInfo=()=>{
    
  }
    


  </script>
  
  <style scoped>
  .dialog-container {
    display: flex;
    height: 70vh;
  }
  
  .category-sidebar {
    width: 200px;
    border-right: 1px solid #eee;
    padding-right: 20px;
  }
  
  .category-item {
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .category-item.active {
    background-color: #f5f7fa;
    font-weight: 500;
  }
  
  .product-main {
    flex: 1;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
  }
  
  .toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
  }
  
  .pagination {
    margin-left: auto;
  }
  
  .footer-toolbar {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
    .caidan{
        margin-left: 2em;
    }
  
  </style>